<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Material Design Bootstrap Template</title>

    <!-- Font Awesome -->
    <link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.min.css">

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Material Design Bootstrap -->
    <link href="css/mdb.min.css" rel="stylesheet">

    <link href="css/style.css" rel="stylesheet">

</head>

<body class="fixed-sn deep-orange-skin">
<!--Double navigation-->
<header>

    <!-- Sidebar navigation -->
    <div id="slide-out" class="side-nav fixed custom-scrollbar">
        <div class="logo-wrapper waves-light">
        <!-- 左上角图片 -->
            <a href="#"><img src="img/title.png" class="img-fluid flex-center"></a>
        </div>
        <div class="side-nav-ul">
            <!-- Side navigation links -->
            <ul id="side-nav-tree-root" class="collapsible collapsible-accordion">
                <!--<li>-->
                <!--<div class="collapsible-header waves-effect"></div>-->
                <!--<div class="collapsible-text collapsible-header">-->
                <!--<i class="fa fa-angle-down rotate-icon"></i>-->
                <!--坚实的考虑防静电失联飞机家里的可使肌肤考虑觉得是浪费吉林省的科技风绝地逢生考虑就分开了电视剧&nbsp;&nbsp;&nbsp;&nbsp;-->
                <!--</div>-->
                <!--<div class="collapsible-body">-->
                <!--<ul class="collapsible collapsible-accordion">-->
                <!--<li>-->
                <!--<div class="collapsible-header waves-effect"></div>-->
                <!--<div class="collapsible-text">-->
                <!--<i class="fa fa-angle-down rotate-icon"></i>-->
                <!--机家里的可使肌肤考虑觉得是浪费吉林省的科技风绝地逢生考虑就分开了电视剧&nbsp;&nbsp;&nbsp;&nbsp;-->
                <!--</div>-->
                <!--<div class="collapsible-body">-->
                <!--<ul class="collapsible collapsible-accordion">-->
                <!--<li>-->
                <!--<div class="collapsible-header waves-effect "></div>-->
                <!--<div class="collapsible-text">叶子节点&nbsp;&nbsp;&nbsp;&nbsp;</div>-->
                <!--</li>-->
                <!--</ul>-->
                <!--</div>-->
                <!--</li>-->
                <!--<li>-->
                <!--<div class="collapsible-header waves-effect "></div>-->
                <!--<div class="collapsible-text">-->
                <!--叶子节点机家里的可使肌肤考虑觉得是浪费吉林省的科技风绝地逢生考虑就分开了电视剧&nbsp;&nbsp;&nbsp;&nbsp;-->
                <!--</div>-->
                <!--</li>-->
                <!--</ul>-->
                <!--</div>-->
                <!--</li>-->
                <!--<li>-->
                <!--<div class="collapsible-header waves-effect"></div>-->
                <!--<div class="collapsible-text">-->
                <!--<i class="fa fa-angle-down rotate-icon"></i>-->
                <!--坚实的考虑防静电失联飞机家里的可使肌肤考虑觉得是浪费吉林省的科技风绝地逢生考虑就分开了电视剧&nbsp;&nbsp;&nbsp;&nbsp;-->
                <!--</div>-->
                <!--<div class="collapsible-body">-->
                <!--<ul class="collapsible collapsible-accordion">-->
                <!--<li>-->
                <!--<div class="collapsible-header waves-effect"></div>-->
                <!--<div class="collapsible-text">-->
                <!--<i class="fa fa-angle-down rotate-icon"></i>-->
                <!--机家里的可使肌肤考虑觉得是浪费吉林省的科技风绝地逢生考虑就分开了电视剧&nbsp;&nbsp;&nbsp;&nbsp;-->
                <!--</div>-->
                <!--<div class="collapsible-body">-->
                <!--<ul class="collapsible collapsible-accordion">-->
                <!--<li>-->
                <!--<div class="collapsible-header waves-effect "></div>-->
                <!--<div class="collapsible-text">叶子节点&nbsp;&nbsp;&nbsp;&nbsp;</div>-->
                <!--</li>-->
                <!--</ul>-->
                <!--</div>-->
                <!--</li>-->
                <!--<li>-->
                <!--<div class="collapsible-header waves-effect"></div>-->
                <!--<div class="collapsible-text">-->
                <!--w叶子节点机家里的可使肌肤考虑觉得是浪费吉林省的科技风绝地逢生考虑就分开了电视剧&nbsp;&nbsp;&nbsp;&nbsp;-->
                <!--</div>-->
                <!--</li>-->
                <!--</ul>-->
                <!--</div>-->
                <!--</li>-->
                <!--<li>-->
                <!--<div class="collapsible-header waves-effect "></div>-->
                <!--<div class="collapsible-text">-->
                <!--<i class="fa fa-angle-down rotate-icon"></i>-->
                <!--牡丹国际俺了几个我的可使肌肤考虑觉得是浪费吉林省的科技风绝地逢生考虑就分开了电视剧&nbsp;&nbsp;&nbsp;&nbsp;-->
                <!--</div>-->
                <!--<div class="collapsible-body">-->
                <!--<ul class="collapsible collapsible-accordion">-->
                <!--<li>-->
                <!--<div class="collapsible-header waves-effect "></div>-->
                <!--<div class="collapsible-text">-->
                <!--机家里的可使肌肤考虑觉得是浪费吉林省的科技风绝地逢生考虑就分开了电视剧&nbsp;&nbsp;&nbsp;&nbsp;-->
                <!--</div>-->
                <!--</li>-->
                <!--<li>-->
                <!--<div class="collapsible-header waves-effect "></div>-->
                <!--<div class="collapsible-text">-->
                <!--叶子节点机家里的可使肌肤考虑觉得是浪费吉林省的科技风绝地逢生考虑就分开了电视剧&nbsp;&nbsp;&nbsp;&nbsp;-->
                <!--</div>-->
                <!--</li>-->
                <!--</ul>-->
                <!--</div>-->
                <!--</li>-->
            </ul>
            <!--/. Side navigation links -->

        </div>
    </div>
    <!--/. Sidebar navigation -->

    <!--Navbar-->
    <nav class="navbar navbar-fixed-top scrolling-navbar double-nav">

        <!-- Breadcrumb-->
        <div class="breadcrumb-dn">
            <p>
                <a class="nav-item nav-link waves-effect waves-light" href="index.html">Breadcrumb or page title</a>
            </p>
        </div>

        <ul class="nav navbar-nav pull-right">
            <li class="nav-item">
                <a class="nav-link"><span class="hidden-sm-down top-right-text">这里是右边</span></a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
                   aria-haspopup="true" aria-expanded="false"><i class="fa fa-user"></i> Profile</a>
                <div class="dropdown-menu dropdown-primary dd-right" aria-labelledby="dropdownMenu1"
                     data-dropdown-in="fadeIn" data-dropdown-out="fadeOut">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
        </ul>

        <div class="navbar-date text-xs-center">
            <i class="fa fa-calendar"></i>
            <span id="show-date"></span>
        </div>

    </nav>
    <!--/.Navbar-->

</header>
<!--/Double navigation-->


<main>
    <div class="row">
        <div id="main-container" class="col-xs-12">
            <div class="view container-effect">
            <!-- 首页图片 -->
                <img src="http://mdbootstrap.com/images/regular/nature/img%20(28).jpg" class="img-fluid" alt="">
                <div class="mask flex-center">
                    <p class="white-text">strong overlay</p>
                </div>
            </div>
        </div>
    </div>
</main>

<!-- SCRIPTS -->

<!-- JQuery -->
<script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>

<!-- Tooltips -->
<script type="text/javascript" src="js/tether.min.js"></script>

<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>

<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>

<script type="text/javascript" src="js/app.js"></script>

</body>

</html>